<template>
  <div class="container">
    <el-tabs type="border-card">
      <el-tab-pane label="订单管理">
        <el-form ref="ruleForm" :inline="true" :model="ruleForm" class="demo-form-inline" :rules="rules">
          <el-form-item label="订单编号:" prop="number" style="width: 220px;">
            <el-input v-model="ruleForm.number" type="text" placeholder="请输入" style="width: 148px;" />
          </el-form-item>
          <el-form-item label="收货人:" prop="name" style="width: 220px;">
            <el-input v-model="ruleForm.name" type="text" placeholder="请输入" style="width: 148px;" />
          </el-form-item>
          <el-form-item label="联系电话:" prop="phone" style="width: 220px;">
            <el-input v-model="ruleForm.phone" type="text" placeholder="请输入" style="width: 148px;" />
          </el-form-item>
          <el-form-item label="订单区域:" prop="region" style="width: 220px;">
            <el-input v-model="ruleForm.region" type="text" placeholder="请输入" style="width: 148px;" />
          </el-form-item>
          <el-form-item label="下单客服:" prop="valueone" style="width: 200px;">
            <el-select v-model="ruleForm.valueone" placeholder="下单客服" style="width: 110px;">
              <el-option v-for="item in optionsone" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item><br>
          <el-select v-model="ruleForm.valuetwo" placeholder="下单时间" style="width: 9%;margin-right: 10px;">
            <el-option v-for="item in optionstwo" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <div class="block" style="display: inline-block;">
            <el-date-picker v-model="ruleForm.start" type="date" placeholder="选择日期" />
            <span style="font-size: 13px;">&nbsp;至&nbsp;</span>
          </div>
          <div class="block" style="display: inline-block;margin-left: 5px;">
            <el-date-picker v-model="ruleForm.end" type="date" placeholder="选择日期" />
          </div>
          <el-form-item style="width: 132px;margin: -1.5px 0 20px 10px;" prop="least" label="金额段:">
            <el-input v-model="ruleForm.least" type="text" placeholder="请输入" style="width: 75px;" />
          </el-form-item>
          <span style="margin: 0 5px;">-</span>
          <el-form-item style="width: 75px;margin-top: -1.5px;" prop="most">
            <el-input v-model="ruleForm.most" type="text" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="订单打印">订单打印</el-tab-pane>
      <el-tab-pane label="模板管理">模板管理</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'Comprehensive',
  data() {
    return {
      ruleForm: {
        number: '',
        name: '',
        phone: '',
        region: '',
        valueone: '',
        valuetwo: '',
        start: '',
        end: '',
        least: '',
        most: ''
      },
      optionsone: [{
        value: '黄金糕',
        label: '黄金糕'
      }, {
        value: '双皮奶',
        label: '双皮奶'
      }, {
        value: '蚵仔煎',
        label: '蚵仔煎'
      }, {
        value: '龙须面',
        label: '龙须面'
      }, {
        value: '北京烤鸭',
        label: '北京烤鸭'
      }],
      optionstwo: [{
        value: '黄金糕',
        label: '黄金糕'
      }, {
        value: '双皮奶',
        label: '双皮奶'
      }, {
        value: '蚵仔煎',
        label: '蚵仔煎'
      }, {
        value: '龙须面',
        label: '龙须面'
      }, {
        value: '北京烤鸭',
        label: '北京烤鸭'
      }],
      rules: {
        number: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        region: [{ required: true, message: '请输入订单区域', trigger: 'blur' }],
        valueone: [{ required: true, message: '请选择客服', trigger: 'blur' }],
        valuetwo: [{ required: true, message: '请选择', trigger: 'blur' }],
        start: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        end: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
        least: [{ required: true, message: '请输入最低值', trigger: 'blur' }],
        most: [{ required: true, message: '请输入最高值', trigger: 'blur' }]
      }
    }
  },
  mounted() {

  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style  scoped>
  .container{
    width: 96%;
    background-color: white;
    margin: 16px auto;
  }
  /deep/ .el-form-item__label{
    font-size: 13px;
    color: #000;
  }
  /deep/ label{
    font-weight: normal !important;
  }
  /deep/ .el-input__inner{
    height: 36px;
    border-radius: 0;
  }
  /deep/ .el-form-item__label{
    padding: 0 5px 0 0;
  }

  /deep/ .el-form-item{
    margin-bottom: 20px;
  }
  /deep/ .el-form-item:nth-child(2){
    margin-right: 0;
  }
</style>
